

<template>
  <div class="box">
    <!-- 选项卡 -->
    <div class="menu">
      <div class="total" :class="{active:item.id === sel}" v-for="item in tabs" :key="item.id" @click="select(item)">
        {{ item.label }}
      </div>
    </div>
    <br />
    <!-- 内容 -->
    <div class="text">
      <div class="all" v-show="sel === 1">
        <span class="cakeWord">
          Cakes are usually made of a Sponge or a ChiffonCake. A Sponge is a kind of cloth similar to silk but not as
          difficult to maintain as silk. ChiffonCake is called ChiffonCake because of its soft texture and smooth
          texture. Sponge cakes rely entirely on eggs (whole or separated) to form the pores in the cake's tissue. A
          typical sponge cake contains only eggs, flour, and sugar. The texture is firm and dense, making it easy to
          choke (compared to Chiffon).
          <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          Mousse cake originated in the capital of gastronomy -- Paris, France. Salaven mousse adds more than ten kinds
          of fresh ingredients with taste and flavor into the fresh cream. There are strict requirements on temperature
          control, raw material ratio and PH value, so that the appearance, color and structure change is rich, and the
          taste is more natural and pure. After frozen, the edible flavor is infinite. In line with people's pursuit of
          exquisite fashion, natural and healthy life philosophy, as the ultimate cake.
        </span>
        <img src="../img/cake.jpg" class="cakeImg">
      </div>
      <div class="all" v-show="sel === 2">
        <span class="eggWord">
          Double yellow egg, three yellow egg is mainly the hen ovarian follicle stimulating time too close or mature at
          the same time, the mature eggs constantly to the fallopian tube, make two or three eggs in the fallopian tube
          meet, be albumen or egg shell membrane package together and become, namely two or three egg yolk folded in the
          same shell, became a double yellow egg or three yellow egg, forming period is just more young chicken eggs.
          <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          The shell is very thin, or even no shell at all, called soft shell eggs. The main component of eggshell is
          calcium carbonate, which is needed to contain a lot of calcium in the hen's food. If there is a lack of
          calcium or vitamin D in the food, or because of the reaction after injection of chicken cholera vaccine, or
          because the fallopian tube peristalsis is strengthened after the chicken is frightened, the egg shell can be
          produced before it is formed.
        </span>
        <img src="../img/egg.jpg" class="eggImg">
      </div>
      <div class="all" v-show="sel === 3">
        <span class="milkWord">
          Uht milk is produced by high-temperature instantaneous sterilization (120~140℃, 1~2sec.) and can be stored at
          room temperature for 30~40 days. Traditional sterilized milk is a liquid milk product made by long-term
          sterilization and can be stored at room temperature for more than six months.
          <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          Milk should produce a series of changes when heating, continue to heat again after boiling, lactose in milk
          begins to coke, decompose gradually for lactic acid and a small amount of formic acid, vitamin is also
          destroyed, even make color, sweet, taste drop significantly. So the hot milk to the initial boiling degree,
          should not be long boiled.
        </span>
        <img src="../img/milk.jpg" class="milkImg">
      </div>
      <div class="all" v-show="sel === 4" style="line-height: 48px;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Grape is one of the oldest fruit tree species in the world. The plant fossils of grape were found in tertiary
        strata, indicating that grape was widespread in Europe, Asia and Greenland at that time. Grape originates in
        western Asia and is cultivated all over the world. About 95% of the grapes in the world are concentrated in the
        northern hemisphere.
        <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Grapes must have a certain intensity of light during normal growth, but when the light is too strong, especially
        grapes into the hard core period is more prone to birthday burning disease, then can take bagging or plant
        leaves as far as possible to keep the leaves can cover the grape fruit.
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    name: 'GoodsDetail',
    data() {
      return {
        sel: 1,
        tabs: [{
            label: 'cake',
            id: 1
          },
          {
            label: 'egg',
            id: 2
          },
          {
            label: 'milk',
            id: 3
          },
          {
            label: 'other',
            id: 4
          },
        ]
      }
    },
    methods: {
      select(item) {
        this.sel = item.id;
      },
    },
  };
</script>
<!-- scoped的作用：不会影响其他页面的样式 -->
<style scoped>
  /* 选项卡 */
  .menu {
    height: 7rem;
    display: flex;
  }

  .total {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #F4FAFF;
    color: black;
    text-align: center;
    float: left
  }

  .total.active {
    background: #333333;
    color: #FFFFFF;
  }

  /* 内容 */
  .text {
    flex: 1;
    overflow: auto;
  }

  /* 蛋糕 */
  .cakeWord {
    text-align: left;
    padding-left: 33px;
    line-height: 48px;
  }

  .cakeImg {
    width: 200px;
    height: 100px;
    /* 设置图像缩放算法：设置成pixelated，图片不管是放大还是缩小，都会变得清晰  */
    image-rendering: pixelated;
    margin-top: -240px;
    margin-left: 70px;
    float: right;
    border-radius: 50%;
  }

  /* 鸡蛋 */
  .eggWord {
    text-align: left;
    padding-left: 33px;
    line-height: 48px;
  }

  .eggImg {
    width: 200px;
    height: 100px;
    /* 设置图像缩放算法：设置成pixelated，图片不管是放大还是缩小，都会变得清晰  */
    image-rendering: pixelated;
    margin-top: -200px;
    margin-left: 70px;
    float: right;
    border-radius: 50%;
  }

  /* 牛奶 */
  .milkWord {
    text-align: left;
    padding-left: 33px;
    line-height: 48px;
  }

  .milkImg {
    width: 200px;
    height: 100px;
    /* 设置图像缩放算法：设置成pixelated，图片不管是放大还是缩小，都会变得清晰  */
    image-rendering: pixelated;
    margin-top: -200px;
    margin-left: 70px;
    float: right;
    border-radius: 50%;
  }
</style>
